<template>
  <div class="app-container">
    <div id="header">
      <Row>
        <Col span="24">
        <div class="content">
          <a class="logo"
            href="//myseller.taobao.com/home.htm"
            target="_blank">
            <img :src="menuPics"
                title="Taobao.com-阿里巴巴旗下网站-卖家中心" /></a>
            <Menu mode="horizontal"
              theme="primary"
              @on-select="handleSelect">
              <MenuItem name="1">首页</MenuItem>
              <MenuItem name="2">自运营</MenuItem>
              <MenuItem name="3">基础设置</MenuItem>
              <Submenu name="4">
                <template slot="title">更多</template>
                <MenuItem name="4-1">规则中心</MenuItem>
                <MenuItem name="4-2">安全中心</MenuItem>
                <MenuItem name="4-3">服务中心</MenuItem>
                <MenuItem name="4-4">卖家论坛</MenuItem>
                <MenuItem name="4-5">淘宝大学</MenuItem>
                <MenuItem name="4-6">问题反馈</MenuItem>
              </Submenu>
            </Menu>
        </div>
        </Col>
      </Row>
    </div>
    <div id="page"
      class="page-container">
      <Row class="content">
        <Col span="4">
        <div class="col-sub">
          <div class="category">
            <div>
              <img src="@/assets/images/TB1EP4OQXXXXXXFapXXXXXXXXXX-18-18.png"
                  class="category-img" />
              <span class="title">店铺管理</span>
            </div>
            <Row class="list">
              <Col span="12">
              <a href="http://www.baidu.com"
                target="_blank">我要开店</a>
              </Col>
            </Row>
          </div>
          <div class="category">
            <div>
              <img src="@/assets/images//TB1M2ubQXXXXXcZXFXXXXXXXXXX-18-18.png"
                  class="category-img" />
              <span class="title">交易评价</span>
            </div>
            <Row class="list">
              <Col span="12">
              <a href="http://www.baidu.com"
                target="_blank">已卖出的宝贝</a>
              </Col>
              <Col span="12">
              <a href="http://www.baidu.com"
                target="_blank">评价管理</a>
              </Col>
            </Row>
          </div>
        </div>
        </Col>
        <Col span="20">
        <div class="main-wrap">
          <Row class="navigation">
            <Col span="20"
                class="crumbs">
            <Breadcrumb separator-class="el-icon-arrow-right">
              <BreadcrumbItem :to="{ path: '/' }">
                <Icon type="ios-information-circle" />
                我是卖家
              </BreadcrumbItem>
              <BreadcrumbItem>交易管理</BreadcrumbItem>
              <BreadcrumbItem>已卖出的宝贝</BreadcrumbItem>
            </Breadcrumb>
            </Col>
            <Col span="4"
                class="help">
            <a target="_blank"
              href="http://www.baidu.com">
              <i class="el-icon-question"></i>
              卖家交易学习专区
            </a>
            </Col>
          </Row>
          <Row class="sold_container">
            <Row id="search_bar"
              class="search_bar"
              v-if="!isSpread">
              <Form inline
                ref="queryForm"
                label-position="left"
                :label-width="90">
                <Row>
                  <Col span="8">
                  <FormItem label="商品ID">
                    <Input size="small"></Input>
                  </FormItem>
                  </Col>
                </Row>
                <Row>
                  <Col span="8">
                  <FormItem label="宝贝名称">
                    <Input size="small"></Input>
                  </FormItem>
                  </Col>
                  <Col span="13">
                  <FormItem label="成交时间">
                    <DatePicker type="datetime"
                      placeholder="请选择时间范围开始"
                      size="small">
                    </DatePicker>
                    -
                    <DatePicker type="datetime"
                      placeholder="请选择时间范围结束"
                      size="small">
                    </DatePicker>
                  </FormItem>
                  </Col>
                </Row>
                <Row>
                  <Col span="8">
                  <FormItem label="买家昵称">
                    <Input size="small"></Input>
                  </FormItem>
                  </Col>
                  <Col span="8">
                  <FormItem label="订单状态">
                    <Select v-model="value"
                      placeholder="请选择"
                      size="small">
                      <Option v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </Option>
                    </Select>
                  </FormItem>
                  </Col>
                  <Col span="8">
                  <FormItem label="评价状态">
                    <Select v-model="value"
                      placeholder="请选择"
                      size="small">
                      <Option v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </Option>
                    </Select>
                  </FormItem>
                  </Col>
                </Row>
                <Row>
                  <Col span="8">
                  <FormItem label="订单编号">
                    <Input size="small"></Input>
                  </FormItem>
                  </Col>
                  <Col span="8">
                  <FormItem label="物流服务">
                    <Input size="small"></Input>
                  </FormItem>
                  </Col>
                  <Col span="8">
                  <FormItem label="售后服务">
                    <Input size="small"></Input>
                  </FormItem>
                  </Col>
                </Row>
                <Row>
                  <Col span="8">
                  <FormItem label="订单类型">
                    <Select v-model="value"
                      placeholder="请选择"
                      size="small">
                      <Option v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </Option>
                    </Select>
                  </FormItem>
                  </Col>
                </Row>
                <Row>
                  <Col span="8">
                  <FormItem label="预售状态">
                    <Select v-model="value"
                      placeholder="请选择"
                      size="small">
                      <Option v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </Option>
                    </Select>
                  </FormItem>
                  </Col>
                </Row>
                <Row>
                  <Col span="6"
                      offset="2">
                  <Button type="error"
                    size="small"
                    class="mrgr_10">搜索订单</Button>
                  <Button size="small"
                    class="mrgr_10">批量导出</Button>
                  </Col>
                </Row>

              </Form>
            </Row>
            <Row class="click_btn_wrap">
              <span @click="isSpread=!isSpread"
                v-if="!isSpread"
                class="click_btn draw_back">收起
                <i class="el-icon-caret-top"></i>
              </span>
              <span @click="isSpread=!isSpread"
                v-if="isSpread"
                class="click_btn spread">展开搜索条件
                <i class="el-icon-caret-bottom"></i>
              </span>
            </Row>
            <Row class="tabs_mode_container">
              <Tabs v-model="activeTab"
                @tab-click="handleClick">
                <TabPane label="近三个月订单"
                  name="first">
                  <table-list :lists="tableData1"></table-list>
                </TabPane>
                <TabPane label="等待买家付款"
                  name="second">
                  <table-list :lists="tableData2"></table-list>
                </TabPane>
                <TabPane label="等待发货"
                  name="third"> </TabPane>
                <TabPane label="已发货"
                  name="fourth"> </TabPane>
                <TabPane label="退款中"
                  name="fifth"> </TabPane>
                <TabPane label="需要评价"
                  name="sixth"> </TabPane>
                <TabPane label="成功的订单"
                  name="seventh"> </TabPane>
                <TabPane label="关闭的订单"
                  name="eighth"> </TabPane>
                <TabPane label="三个月前订单"
                  name="ninth"> </TabPane>
              </Tabs>
            </Row>

          </Row>
        </div>
        </Col>
      </Row>
    </div>
  </div>
</template>

<script>
import TableList from './TableList.vue'
import menuPic from '@/assets/images/TB1MEEtRXXXXXaSXpXXXXXXXXXX-156-30.png'
export default {
  name: 'TaoBao',
  props: {
    msg: String
  },
  components: {
    TableList
  },
  data() {
    return {
      menuPics: menuPic,
      options: [
        {
          value: '选项1',
          label: '黄金糕'
        },
        {
          value: '选项2',
          label: '双皮奶'
        },
        {
          value: '选项3',
          label: '蚵仔煎'
        },
        {
          value: '选项4',
          label: '龙须面'
        },
        {
          value: '选项5',
          label: '北京烤鸭'
        }
      ],
      value: '',
      isSpread: false,
      activeTab: 'first',
      tableData1: [
        {
          prop1: '123',
          prop2: '123',
          prop3: '123',
          prop4: '123',
          prop5: '123',
          prop6: '123',
          prop7: '123',
          prop8: '123',
          prop9: '123'
        },
        {
          prop1: '123',
          prop2: '123',
          prop3: '123',
          prop4: '123',
          prop5: '123',
          prop6: '123',
          prop7: '123',
          prop8: '123',
          prop9: '123'
        },
        {
          prop1: '123',
          prop2: '123',
          prop3: '123',
          prop4: '123',
          prop5: '123',
          prop6: '123',
          prop7: '123',
          prop8: '123',
          prop9: '123'
        }
      ],
      tableData2: []
    }
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath)
    },
    handleClick(tab, event) {
      console.log(tab, event)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
</style>
